
<div class="container">
    <div class="row" style="background-color: #d9edf7;padding: 10px; margin-bottom: 20px">
        <a class="btn btn-info" href="javascript:doTurnback()"><i class="fa fa-undo"></i>&nbsp;&nbsp;&nbsp;&nbsp;Trở về</a>
    </div>

    <div class="row">
        <h3>Đăng ký tài khoản Menu Online</h3>
    </div>

    <div id="divRegister" class="row register-container column-seperation">
        <div class="col-md-5  col-sm-5 col-xs-10">
            <p class="text-info" style="font-size: 1.2em; border-bottom: 2px solid #46B8DA">Sử dụng tài khoản Facebook, Twitter.</p>

            <br>
            <button class="btn btn-block btn-info col-md-8" type="button">
                <div class="pull-left">&nbsp;&nbsp;&nbsp;<i class="fa fa-facebook"></i></div>
                <span class="bold">Đăng ký bằng Facebook</span> </button>
            <button class="btn btn-block btn-success col-md-8" type="button">
                <div class="pull-left">&nbsp;&nbsp;&nbsp;<i class="fa fa-twitter"></i></div>
                <span class="bold">Đăng ký bằng Twitter</span>
            </button>
        </div>
        <div class="col-md-5 col-sm-6 col-xs-10">
            <form id="register_form">
            <p class="text-info" style="font-size: 1.2em; border-bottom: 2px solid #46B8DA">Đăng ký sử dụng email</p>
            <br>

            <div class="row">
                <div class="form-group col-md-10">
                    <label class="form-label"><em>*</em>&nbsp;Email</label>
                    <div class="controls">
                        <div class="input-with-icon  right">
                            <input type="email" required   name="txtemail" id="txtemail" class="form-control" placeholder="my_mail@example.com">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-10">
                    <label class="form-label"><em>*</em>&nbsp;Password</label>
                    <span class="help"></span>
                    <div class="controls">
                        <div class="input-with-icon  right">
                            <input type="password" minlength="6" required name="txtpassword" id="txtpassword" class="form-control" placeholder="Ít nhất 6 ký tự">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-10">
                    <label class="form-label"><em>*</em>&nbsp;Nhập lại password</label>
                    <span class="help"></span>
                    <div class="controls">
                        <div class="input-with-icon  right">
                            <input type="password" minlength="6" required name="txtretypepassword" id="txtretypepassword" class="form-control" placeholder="Ít nhất 6 ký tự">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="form-group col-md-10">
                    <label class="form-label">Tên hiển thị</label>
                    <span class="help"></span>
                    <div class="controls">
                        <div class="input-with-icon  right">
                            <input  name="txtname" id="txtname" minlength="6" class="form-control" placeholder="Tên bạn muốn hiển thị khi đăng nhập. Ít nhất 6 ký tự">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-10">
                    <div id="login-error-ctn" class="hide alert alert-warning"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-10">
                <p class="text-muted">Vui lòng đọc trước <a href="#">quy định</a> thành viên</p>
                </div>
            </div>
            <div class="row">
                <div class="control-group  col-md-10">
                    <div class="checkbox checkbox check-success">
                        <input type="checkbox" id="checkbox1" value="1" checked>
                        <label for="checkbox1">Chấp nhận điều khoản </label>
                    </div>
                </div>
            </div>
            <div class="row" style="border-top:2px solid #46B8DA; padding-top: 10px ">
                <div class="col-md-10">
                    <a id="btnLogin" class="btn btn-primary btn-cons pull-right" href="javascript:doRegister()" >Đăng ký</a>
                </div>
            </div>
            </form>

        </div>
    </div>
    <div id="divSuccess" class="row  hide fade">
        <div class="alert alert-success"><p>Chào mừng bạn <span id="spn_username" class=""></span> tham gia Menuonline. Bạn được tặng <span id="spn_balance"></span> coin để mua những coupond đầu tiên. Have fun</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $("#txtemail").focus();
        $('#register_form').validate_popover({ popoverPosition: 'top' });
    })

    function doRegister(){
        email = $('#txtemail').val();
        password = $('#txtpassword').val()
        passwordretype = $('#txtretypepassword').val()
        name = $('#txtname').val()
        $.post('/register-user',{email:email,password:password, passwordretype:passwordretype,
                name:name
            }
            ,function(result){

                if (result.success){
                    $('#divSuccess').removeClass('hide');
                    $('#divRegister').addClass('hide');
                    $('#spn_username').html('<strong>'+result.username+'</strong>');
                    $('#spn_balance').html('<strong>'+result.balance+'</strong>');

                }else{

                }

            },'json');
    }

    function doTurnback(){
        backLocation = document.referrer;
        window.location.assign(backLocation);
    }


</script>
